import React, { Component } from 'react';
import { Slider, Modal, Flex, WhiteSpace } from 'antd-mobile';
import { getShowDuration } from '../utils';
import VolumAdjust from '../components/VolumAdjust';
import BottomActionSheet, { BottomAction } from '../components/BottomActionSheet';

import IconSkipNext from '../images/skip_next_black_48px.svg';
import IconSkipPrevious from '../images/skip_previous_black_48px.svg';
import IconPlay from '../images/play_arrow_black_48px.svg';
import IconPause from '../images/pause_black_48px.svg';
import IonPlayList from '../images/playlist_play_black_48px.svg';

import IconVolume from '../images/volume_down_black_48px.svg';
import IconAlarm from '../images/alarm_black_48px.svg';
import IconLockOpen from '../images/lock_open_black_48px.svg';
import IconLockOutline from '../images/lock_outline_black_48px.svg';

const alert = Modal.alert;

const sleepTimeList = [
    { index: 0, data: "不应用", seconds: 432000 },
    { index: 1, data: "5分钟", seconds: 300 },
    { index: 2, data: "10分钟", seconds: 600 },
    { index: 3, data: "20分钟", seconds: 1200 },
    { index: 4, data: "30分钟", seconds: 1800 },
    { index: 5, data: "60分钟", seconds: 3600 }
];

// 根据休眠的时间获取到列表中勾选的位置
function getSleepTimeIndex(sleepTime) {
    return sleepTimeList.findIndex((item) => {
        return sleepTime === item.seconds;
    });
}


// 底部音频播放控制界面
class AudioPlayOperate extends Component {
    constructor(props, context) {
        super(props, context);
        this.volumAction = this.volumAction.bind(this);
        this.bottomAction = this.bottomAction.bind(this);

        let circle = this.props.circleType;
        let lock = this.props.lock;
        let volume = this.props.volume;
        let sleepTime = this.props.sleepTime;

        this.state = {
            deviceName: localStorage.getItem('device_name'),
            album: null,
            audio: null,
            isPlaying: false, // 播放状态
            progress: 0,  // 播放进度
            isOnline: false,
            circleType: circle || 0,
            lock: lock || 0,
            volume: volume || 100,
            sleepTime: sleepTime || 0,
            showAdjustTime: false,
            showAdjustVolume: false,
        }
    }

    componentWillReceiveProps(nextProps) {
        // 播放模式
        if (nextProps.circleType !== this.state.circleType) {
            this.setState({ circleType: nextProps.circleType });
        }

        if (nextProps.lock !== this.state.lock) {
            this.setState({ lock: nextProps.lock });
        }

        // 播放状态
        if (nextProps.isPlaying !== this.state.isPlaying) {
            this.setState({ isPlaying: nextProps.isPlaying })
        }
        // 播放进度
        if (nextProps.progress !== this.state.progress) {
            this.setState({
                progress: nextProps.progress * 5
            });
        }
        // 音量设置
        if (nextProps.volume !== this.state.volume) {
            this.setState({
                volume: nextProps.volume
            });
        }
        // 休眠时间
        if (nextProps.sleepTime !== this.state.sleepTime) {
            this.setState({
                sleepTime: nextProps.sleepTime
            });
        }
        // 播放专辑
        if (nextProps.album !== this.state.album) {
            this.setState({ album: nextProps.album });
        }
        // 播放音频
        if (nextProps.audio !== this.state.audio) {
            this.setState({ audio: nextProps.audio });
        }
    }

    componentWillUnmount() {
        if (this.dialog) {
            this.dialog.close();
        }
    }

    // 处理所有的点击事件
    command(type, value) {
        this.props.executeCommand({ type: type, value: value });
    }

    formartTime() {
        if (this.state.audio && this.state.audio.duration) {
            return getShowDuration(this.state.audio.duration);
        }
        return "";
    }
    // 计算播放时间
    calcCurTime() {
        if (this.state.audio && this.state.audio.duration) {
            if (this.state.isPlaying) {
                if (this.state.progress >= 500) {
                    return getShowDuration(this.state.audio.duration);
                }
            }
            return getShowDuration(this.state.progress / 500 * this.state.audio.duration);
        }
        return "";
    }

    showList() {
        this.props.showList();
    }


    // 显示调节音量
    showVolume() {
        this.setState({ showAdjustVolume: true });
    }
    volumAction(obj) {
        if (obj) {
            this.command(audio_operate.volume, obj.volume);
        }
        this.setState({ showAdjustVolume: false });
    }

    // 显示设置休眠时间
    showSleepTime() {
        this.setState({
            showAdjustTime: true
        });
    }

    bottomAction(obj) {
        if (obj) {
            if (obj.action === BottomAction.sleep) {
                const time = sleepTimeList[obj.value].seconds;
                this.command(audio_operate.sleep_time, time);
            } else {
                this.command(audio_operate.circle, obj.value);
            }
        }
        this.setState({
            showAdjustTime: false,
        });
    }

    showLock() {
        let msg = this.state.lock === 0 ? "开启儿童锁后," + this.state.deviceName + "上的按键功能将失效,您确定要这么做吗?" : "关闭儿童锁后," + this.state.deviceName + "上的按钮将生效,您确定要这么做吗?"
        this.dialog = alert('童锁设置', msg,
            [
                { text: '取消' },
                {
                    text: '确定', onPress: () =>
                        this.handleLock()
                },
            ]);
    }
    handleLock() {
        let newLock = this.state.lock === 1 ? 0 : 1;
        this.command(audio_operate.lock, newLock);
    }

    render() {
        return (
            <div>
                <WhiteSpace size="xl" />
                <WhiteSpace size="xl" />
                <Flex>
                    <Flex.Item>
                        <div style={styles.div_item}>
                            <img src={IconVolume} style={styles.smart_icon} onClick={this.showVolume.bind(this)} alt='' />
                        </div>
                    </Flex.Item>
                    <Flex.Item>
                        <div style={styles.div_item}>
                            <img src={IconAlarm} style={styles.smart_icon} onClick={this.showSleepTime.bind(this)} alt='' />
                        </div>
                    </Flex.Item>
                    <Flex.Item>
                        <div style={styles.div_item}>
                            <img src={this.state.lock === 0 ?  IconLockOpen : IconLockOutline} style={styles.smart_icon} onClick={this.showLock.bind(this)} alt='' />
                        </div>
                    </Flex.Item>

                    <Flex.Item>
                        <div style={styles.div_item}>
                            <img src={IonPlayList} style={styles.smart_icon} onClick={this.showList.bind(this)} alt='' />
                        </div>
                    </Flex.Item>
                </Flex>
                <WhiteSpace size="md" />

                <div style={{ display: "flex", alignItems: "center", justifyContent: 'center', margin: 5, height: 26 }}>
                    <p style={{ color: "#9E9E9E", width: 60, textAlign: 'center' }}>{this.calcCurTime()}</p>
                    <Slider
                        style={styles.slider}
                        value={this.state.progress}
                        min={0}
                        max={500}
                        trackStyle={styles.slider_track}
                        railStyle={styles.slider_track}
                        handleStyle={styles.slider_handle}
                    />
                    <p style={{ color: "#9E9E9E", width: 60, textAlign: 'center' }}>{this.formartTime()}</p>
                </div>
                <WhiteSpace size="md" />
                <Flex>
                    <Flex.Item />
                    <Flex.Item>
                        <div style={styles.div_item}>
                            <img src={IconSkipPrevious} style={styles.icon} onClick={this.command.bind(this, audio_operate.previous)} alt='' />
                        </div>
                    </Flex.Item>
                    <Flex.Item>
                        <div style={styles.div_item}>
                            <img src={this.state.isPlaying ? IconPause : IconPlay} style={styles.icon} onClick={this.command.bind(this, audio_operate.play_pause)} alt='' />
                        </div>
                    </Flex.Item>
                    <Flex.Item>
                        <div style={styles.div_item}>
                            <img src={IconSkipNext} style={styles.icon} onClick={this.command.bind(this, audio_operate.next)} alt='' />
                        </div>
                    </Flex.Item>
                    <Flex.Item />
                </Flex>
                {
                    this.state.showAdjustVolume &&
                    <VolumAdjust
                        volume={this.state.volume}
                        volumAction={this.volumAction} />
                }

                {
                    this.state.showAdjustTime &&
                    <BottomActionSheet
                        title={"设置休眠时间"}
                        current={getSleepTimeIndex(this.state.sleepTime)}
                        list={sleepTimeList}
                        action={BottomAction.sleep}
                        actionFuc={this.bottomAction} />
                }

            </div>
        );
    }
}

export default AudioPlayOperate;

export const audio_operate = {
    circle: 0,
    previous: 1,
    play_pause: 2,
    next: 3,
    play_list: 4,
    volume: 5,
    sleep_time: 6,
    lock: 7,
    is_online: 8,
    upgrade: 9,
    force_offline: 10,
    upgrade_online:11
};

const itemWidth = 60;
const styles = {
    icon: {
        height: 42,
        width: 42,
    },
    smart_icon: {
        width: 30,
        height: 30,
    },
    slider: { width: document.documentElement.clientWidth - itemWidth * 2 - 30, height: 3 },
    slider_handle: {
        height: '14px',
        width: '14px',
        marginLeft: '-7px',
        marginTop: '-5.0px',
    },
    slider_track: {
        height: '3px'
    },
    div_item: { display: 'flex', justifyContent: 'center', alignItems: 'center' },
}